<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-for="(item,index) in fruits">
				{{index}}{{item}}<br>
			</span>
			
			<h2 v-for="(item,index) in list">
				第{{index + 1}}件事:{{item}}
			</h2>
			<!-- <h1 v-for="i in 100">
				{{i}}
			</h1> -->
			<!-- <h1 v-for="item in fruits">
				{{item}}
			</h1> -->
			<h1 v-for="(value,key) in student">
			{{key}}:{{value}}
			</h1>
			
			<h1 v-for="(item,index) in goods">
				<span v-for="(value,key) in item">
					{{key}}:{{value}}<br>
				</span><hr>
			</h1>
			<table border="1">
				<tr v-for="(item,index) in table">
					<td v-for="(it2,in2) in item">
						{{it2}}
					</td>
				</tr>
			</table>
			
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						fruits: ['苹果','香蕉','西瓜'],
						list:['吃饭','睡觉','学习'],
						student:{
							name:'SiLiang',
							cls:'天穹01'
						},
						goods:[
							{
								title:'六味地黄丸',
								money:166
							},
							{
								title:'地黄连',
								money:199
							}
						],
						table:[
							[1,1,0,1,1],
							[2,2,1,2,2],
							[3,3,2,3,3]
						]
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>